<!--
 * @description: 生成分镜
 * @fileName: GenerateStoryboard
 * @author: 17076
 * @date: 2025/3/3-下午2:21
 * @version: V1.0.0
-->

<template>
  <cs-dialog
    :dialog="dialogOption"
    @onSubmit="save"
  >
    <div slot="content">
      <el-form ref="form" :model="infoForm" :rules="rules" label-width="90px">
        <!--        <el-form-item label="画面比例" prop="pictureScale">-->
        <!--          <el-select v-model="infoForm['pictureScale']" placeholder="请选择">-->
        <!--            <el-option-->
        <!--              v-for="item in pictureScaleList"-->
        <!--              :key="item.code"-->
        <!--              :label="item['name']"-->
        <!--              :value="item.code"-->
        <!--            >-->
        <!--              <div class="flex-row" style="align-items: center">-->
        <!--                <svg-icon :icon-class="'Rectangle' + item.code" />-->
        <!--                <span style="margin-left: 10px">{{ item['name'] }}</span>-->
        <!--              </div>-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="AI智能绘制" prop="createLens" class="create-lens">
          <el-switch v-model="infoForm['createLens']" active-value="1" inactive-value="0" />
        </el-form-item>
        <el-form-item :label="infoForm['createLens'] === '1' ? '自动按分镜生图' : '关闭自动生图'" class="tips" :label-width="infoForm['createLens'] === '1' ? '100px' : '90px'" />
        <!--        <el-form-item label="画面风格" prop="pictureStyleName">-->
        <!--          <span style="color: #FFFFFF">{{ infoForm['pictureStyleName'] }}</span>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="剧本角色" prop="rolesName">-->
        <!--          <span style="color: #FFFFFF">{{ infoForm['rolesName'] }}</span>-->
        <!--        </el-form-item>-->
      </el-form>
    </div>
  </cs-dialog>
</template>

<script>
import { queryPlayDetailsInfo, updatePlayDescInfo } from '@/api/play'
import { mapActions } from 'vuex'
export default {
  name: 'GenerateStoryboard',
  data() {
    return {
      dialogOption: {
        width: '400px',
        title: {
          title: '已确认分镜内容'
        },
        show: false
      },
      // 画面比例
      pictureScaleList: JSON.parse(sessionStorage.getItem('pictureScale')),
      infoForm: {},
      rules: {
        pictureScale: [{ required: true, message: '请选择画面比例', trigger: 'blur' }]
      }
    }
  },
  methods: {
    ...mapActions({
      changeCreateLens: 'lens/changeCreateLens'
    }),
    show(data) {
      this.infoForm = data
      this.dialogOption.show = true
      this.queryInfo()
    },
    // 查询相关信息
    queryInfo() {
      queryPlayDetailsInfo({ playId: this.infoForm['id'] }).then(res => {
        if (res['code'] === 200) {
          const { createLens } = res.data
          // this.$set(this.infoForm, 'pictureStyleName', playStyleName)
          // this.$set(this.infoForm, 'rolesName', roleNames)
          // this.$set(this.infoForm, 'pictureScale', pictureScale)
          this.$set(this.infoForm, 'createLens', createLens)
        }
      })
    },
    save(callback) {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const { code, msg } = await updatePlayDescInfo(this.infoForm)
          code === 200 ? this.$message.success(msg || '保存成功') : this.$message.error(msg || '保存失败')
          // 保存是否自动生成镜头
          await this.changeCreateLens(this.infoForm['createLens'])
          this.$emit('save', '4')
          callback(true)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .create-lens {
    .el-form-item__label {
      color: #B6C7D1;
    }
  }
  .tips {
    .el-form-item__label {
      color: #5C6872;
      font-size: 12px;
    }
  }
}
</style>
